【更新】优化前端搜索组源码及个人中心优化

pull/162/MERGE
xiaonuobase 2023-09-09 01:01:01 +08:00
parent 1a828f8378
commit cad24eb2a8
7 changed files with 367 additions and 448 deletions

View File

@ -1,58 +0,0 @@
import { mapState, mapActions } from 'pinia'
import hotkeys from 'hotkeys-js'
import { searchStore } from '@/store'
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(searchStore, {
searchActive: (state) => state.active,
searchHotkey: (state) => state.hotkey
})
},
methods: {
...mapActions(searchStore, ['toggleActive', 'setActive']),
// 接收点击搜索按钮
handleSearchClick() {
this.toggleActive()
if (this.searchActive) {
setTimeout(() => {
if (this.$refs.panelSearch) {
this.$refs.panelSearch.focus()
}
}, 300)
}
},
searchPanelOpen() {
if (!this.searchActive) {
this.setActive(true)
setTimeout(() => {
if (this.$refs.panelSearch) {
this.$refs.panelSearch.focus()
}
}, 300)
}
},
// 关闭搜索面板
searchPanelClose() {
if (this.searchActive) {
this.setActive(false)
}
}
}
}

View File

@ -1,7 +1,26 @@
<template> <template>
<div @keyup.up="handleKeyUp" @keyup.down="handleKeyDown" @keyup.enter="handleKeyEnter" @click.self="handlePanelClick"> <div class="search panel-item" @click="searchPanelOpen">
<search-outlined />
</div>
<xn-form-container
title="搜索"
:visible="searchActive"
:closable="false"
:footer="null"
:width="600"
destroyOnClose
dialogClass="searchModal"
:bodyStyle="{ maxHeight: '520px', overflow: 'auto', padding: '14px' }"
@close="searchPanelClose"
>
<div
@keyup.up="handleKeyUp"
@keyup.down="handleKeyDown"
@keyup.enter="handleKeyEnter"
@click.self="handlePanelClick"
>
<a-input <a-input
ref="input" ref="inputRef"
v-model="searchText" v-model="searchText"
class="search-box" class="search-box"
style="width: 100%" style="width: 100%"
@ -22,7 +41,7 @@
@keypress.down="handleKeyDown" @keypress.down="handleKeyDown"
style="margin: 10px 0" style="margin: 10px 0"
> >
<div ref="cardList" class="search-card beauty-scroll"> <div ref="cardListRef" class="search-card beauty-scroll">
<a-list size="small" :data-source="resultsList"> <a-list size="small" :data-source="resultsList">
<template #renderItem="{ item, index }"> <template #renderItem="{ item, index }">
<a-list-item <a-list-item
@ -74,30 +93,44 @@
<span class="tips">关闭</span> <span class="tips">关闭</span>
</div> </div>
</div> </div>
</xn-form-container>
</template> </template>
<script> <script setup>
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import { mapState } from 'pinia'
import { searchStore } from '@/store' import { searchStore } from '@/store'
import { useRouter, useRoute } from 'vue-router'
import hotkeys from 'hotkeys-js'
export default { const route = useRoute()
data() { const router = useRouter()
return { const searchText = ref('')
searchText: '', const cardIndex = ref(0)
cardIndex: 0, const results = ref([])
results: [] const search = searchStore()
} const inputRef = ref()
}, const cardListRef = ref()
computed: { const setActive = search.setActive
...mapState(searchStore, ['pool']), const toggleActive = search.toggleActive
const pool = computed(() => {
return search.pool
})
const searchActive = computed(() => {
return search.active
})
const searchHotkey = computed(() => {
return search.hotkey
})
const mixinSearch = computed(() => {
return mixinSearch
})
// //
resultsList() { const resultsList = computed(() => {
return this.results.length === 0 || this.searchText === '' ? this.pool : this.results return results.value.length === 0 || searchText.value === '' ? pool.value : results.value
}, })
// pool fuse // pool fuse
fuse() { const fuse = computed(() => {
return new Fuse(this.pool, { return new Fuse(pool.value, {
shouldSort: true, // shouldSort: true, //
threshold: 0.6, // threshold: 0.6, //
location: 0, // location: 0, //
@ -105,43 +138,41 @@
minMatchCharLength: 1, // minMatchCharLength: 1, //
keys: ['name', 'namePinyin', 'namePinyinFirst'] keys: ['name', 'namePinyin', 'namePinyinFirst']
}) })
} })
},
methods: {
// //
querySearch(e) { const querySearch = (e) => {
let queryString = e.target.value || '' let queryString = e.target.value || ''
const results = queryString && this.fuse.search(queryString).map((e) => e.item) const result = queryString && fuse.value.search(queryString).map((e) => e.item)
this.searchText = queryString searchText.value = queryString
this.results = results results.value = result
}, }
// //
focus() { const focus = () => {
this.searchText = '' searchText.value = ''
setTimeout(() => { setTimeout(() => {
if (this.$refs.input) { if (inputRef.value) {
this.$refs.input.focus() inputRef.value.focus()
} }
// //
this.searchText = '' searchText.value = ''
this.results = [] results.value = []
}, 300) }, 300)
},
handleKeyEnter() {
let idx = this.cardIndex
if (this.resultsList[idx]) {
this.handleSelect(this.resultsList[idx].fullPath)
} }
}, const handleKeyEnter = () => {
handleKeyUp() { let idx = cardIndex.value
this.handleKeyUpOrDown(true) if (resultsList.value[idx]) {
}, handleSelect(resultsList.value[idx].fullPath)
handleKeyDown() { }
this.handleKeyUpOrDown(false) }
}, const handleKeyUp = () => {
handleKeyUpOrDown(up) { handleKeyUpOrDown(true)
let len = this.resultsList.length - 1 }
let idx = this.cardIndex const handleKeyDown = () => {
handleKeyUpOrDown(false)
}
const handleKeyUpOrDown = (up) => {
let len = resultsList.value.length - 1
let idx = cardIndex.value
if (up) { if (up) {
// //
if (idx > 0) { if (idx > 0) {
@ -157,54 +188,75 @@
idx = 0 idx = 0
} }
} }
this.cardIndex = idx cardIndex.value = idx
if (this.$refs.cardList.getElementsByClassName('ant-list-item')[idx]) { if (cardListRef.value.getElementsByClassName('ant-list-item')[idx]) {
this.$refs.cardList.scrollTop = this.$refs.cardList.getElementsByClassName('ant-list-item')[idx].offsetTop cardListRef.value.scrollTop = cardListRef.value.getElementsByClassName('ant-list-item')[idx].offsetTop
} else { } else {
this.$refs.cardList.scrollTop = 0 cardListRef.value.scrollTop = 0
}
}
const onCardIn = () => {
inputRef.value.activated = false
inputRef.value.blur()
}
const onCardOut = () => {
cardIndex.value = -1
}
const onCardItemHover = (index) => {
cardIndex.value = index
} }
},
onCardIn() {
this.$refs.input.activated = false
this.$refs.input.blur()
},
onCardOut() {
this.cardIndex = -1
},
onCardItemHover(index) {
this.cardIndex = index
},
// //
handleSelect(path) { const handleSelect = (path) => {
// //
if (path === this.$route.path) { if (path === route.path) {
this.handleEsc() searchPanelClose()
return return
} }
this.$router.push({ path }) router.push({ path })
this.handleEsc() searchPanelClose()
},
//
closeSuggestion() {
if (this.$refs.input.activated) {
this.results = []
this.$refs.input.activated = false
} }
},
// //
handlePanelClick(e) { const handlePanelClick = (e) => {
if ('INPUT' !== e.target.tagName) { if ('INPUT' !== e.target.tagName) {
this.handleEsc() searchPanelClose()
}
},
//
async handleEsc() {
this.closeSuggestion()
await this.$nextTick()
this.$emit('close')
} }
} }
//
const searchPanelOpen = () => {
if (!searchActive.value) {
setActive(true)
setTimeout(() => {
if (inputRef.value) {
inputRef.value.focus()
} }
}, 300)
}
}
//
const searchPanelClose = () => {
if (searchActive.value) {
setActive(false)
}
results.value = []
if (inputRef.value.activated) {
inputRef.value.activated = false
}
}
onMounted(() => {
// [ ]
hotkeys(searchHotkey.value.open, (event) => {
event.preventDefault()
searchPanelOpen()
})
// [ ]
hotkeys(searchHotkey.value.close, (event) => {
event.preventDefault()
searchPanelClose()
})
})
//
hotkeys.unbind(searchHotkey.value.open)
hotkeys.unbind(searchHotkey.value.close)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -249,7 +301,7 @@
} }
} }
.search-card { .search-card {
height: 220px; height: 380px;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }

View File

@ -1,36 +1,34 @@
<template> <template>
<div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex> <div class="d2-panel-search-item" :class="props.hoverMode ? 'can-hover' : ''" flex>
<div class="d2-panel-search-item__icon" flex-box="0"> <div class="d2-panel-search-item__icon" flex-box="0">
<div class="d2-panel-search-item__icon-box" flex="main:center cross:center"> <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-if="props.item.icon" :type="props.item.icon" />
<a-icon v-else type="menu" /> <a-icon v-else type="menu" />
</div> </div>
</div> </div>
<div class="d2-panel-search-item__info" flex-box="1" flex="dir:top"> <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"> <div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
<span>{{ item.title }}</span> <span>{{ props.item.title }}</span>
</div> </div>
<div class="d2-panel-search-item__info-fullTitle" flex-box="0"> <div class="d2-panel-search-item__info-fullTitle" flex-box="0">
<span>{{ item.fullTitle }}</span> <span>{{ props.item.fullTitle }}</span>
</div> </div>
<div class="d2-panel-search-item__info-path" flex-box="0"> <div class="d2-panel-search-item__info-path" flex-box="0">
<span>{{ item.path }}</span> <span>{{ props.item.path }}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script setup>
export default { const props = defineProps({
props: {
item: { item: {
default: () => ({}) default: () => ({})
}, },
hoverMode: { hoverMode: {
default: false default: false
} }
} })
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -1,41 +0,0 @@
<template>
<a-modal
v-model:visible="visible"
title="修改密码"
:mask-closable="false"
:width="800"
:destroy-on-close="true"
@ok="handleOk"
@cancel="handleCancel"
>
</a-modal>
</template>
<script>
export default {
data() {
return {
visible: false
}
},
methods: {
//
showUpdPwdModal(value) {
this.visible = true
},
// icon
radioGroupChange(e) {
this.iconItemDefault = e.target.value
},
//
handleOk() {
this.visible = false
this.$emit('updPwdCallBack')
},
handleCancel() {
this.visible = false
this.$emit('updPwdCallBack')
}
}
}
</script>

View File

@ -1,12 +1,11 @@
<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 /> <panel-search v-if="!isMobile" />
</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>
<devUserMessage /> <dev-user-message />
<a-dropdown class="user panel-item"> <a-dropdown class="user panel-item">
<div class="user-avatar"> <div class="user-avatar">
<a-avatar :src="userInfo.avatar" /> <a-avatar :src="userInfo.avatar" />
@ -30,7 +29,7 @@
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
<a-dropdown v-if="!ismobile" class="panel-item"> <a-dropdown v-if="!isMobile" class="panel-item">
<global-outlined /> <global-outlined />
<template #overlay> <template #overlay>
<a-menu :selected-keys="lang"> <a-menu :selected-keys="lang">
@ -43,7 +42,7 @@
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
<div v-if="setDeawer === 'true'" class="setting panel-item" @click="openSetting"> <div v-if="setDrawer === 'true'" class="setting panel-item" @click="openSetting">
<layout-outlined /> <layout-outlined />
</div> </div>
</div> </div>
@ -52,70 +51,43 @@
<a-drawer v-model:visible="settingDialog" :closable="false" width="300"> <a-drawer v-model:visible="settingDialog" :closable="false" width="300">
<setting /> <setting />
</a-drawer> </a-drawer>
<!-- 搜索面板 -->
<xn-form-container
title="搜索"
:visible="searchActive"
:closable="false"
:footer="null"
:width="600"
destroyOnClose
dialogClass="searchModal"
:bodyStyle="{ maxHeight: '520px', overflow: 'auto', padding: '14px' }"
@close="searchPanelClose"
>
<panel-search ref="panelSearch" @close="searchPanelClose" />
</xn-form-container>
</template> </template>
<script> <script setup name="layoutUserBar">
import { createVNode } from 'vue' import { createVNode } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue' import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import screenfull from 'screenfull' import { Modal } from 'ant-design-vue'
import i18n from '@/locales/index'
import screenFull from 'screenfull'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import setting from './setting.vue' import Setting from './setting.vue'
import router from '@/router' import router from '@/router'
import tool from '@/utils/tool' import tool from '@/utils/tool'
import config from '@/config/index'
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 PanelSearch from './panel-search/index.vue'
import mixinSearch from './mixins/search'
import { mapState } from 'pinia'
import { globalStore } from '@/store' import { globalStore } from '@/store'
export default {
components: {
setting,
devUserMessage,
panelSearch
},
mixins: [mixinSearch],
data() {
return {
lang: [],
settingDialog: false,
userName: '',
userNameF: '',
setDeawer: import.meta.env.VITE_SET_DRAWER
}
},
computed: {
...mapState(globalStore, ['ismobile', 'userInfo'])
},
created() { const lang = ref(new Array(tool.data.get('APP_LANG') || config.LANG))
// const settingDialog = ref(false)
this.lang = new Array(this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG) const setDrawer = ref(import.meta.env.VITE_SET_DRAWER)
this.userName = this.userInfo?.userName || '' const store = globalStore()
this.userNameF = this.userName.substring(0, 1) const isMobile = computed(() => {
}, return store.ismobile
methods: { })
const userInfo = computed(() => {
return store.userInfo
})
const userName = ref(userInfo.value?.userName || '')
// //
handleUser(key) { const handleUser = (key) => {
if (key === 'uc') { if (key === 'uc') {
router.push({ path: '/usercenter' }) router.push({ path: '/usercenter' })
} }
if (key === 'clearCache') { if (key === 'clearCache') {
this.$confirm({ Modal.confirm({
title: '提示', title: '提示',
content: '确认清理所有缓存?', content: '确认清理所有缓存?',
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
@ -134,7 +106,7 @@
}) })
} }
if (key === 'outLogin') { if (key === 'outLogin') {
this.$confirm({ Modal.confirm({
title: '提示', title: '提示',
content: '确认退出当前用户?', content: '确认退出当前用户?',
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
@ -149,7 +121,6 @@
loginApi loginApi
.logout(param) .logout(param)
.then(() => { .then(() => {
// message.c
// //
tool.data.remove('TOKEN') tool.data.remove('TOKEN')
tool.data.remove('USER_INFO') tool.data.remove('USER_INFO')
@ -166,27 +137,23 @@
onCancel() {} onCancel() {}
}) })
} }
},
//
handleIn18(key) {
this.lang = []
this.lang.push(key)
this.$i18n.locale = key
this.$TOOL.data.set('APP_LANG', key)
},
//
openSetting() {
this.settingDialog = true
},
//
fullscreen() {
const element = document.documentElement
if (screenfull.isEnabled) {
screenfull.toggle(element)
} }
}, //
// const handleIn18 = (key) => {
fullSearch() {} lang.value = []
lang.value.push(key)
i18n.locale = key
tool.data.set('APP_LANG', key)
}
//
const openSetting = () => {
settingDialog.value = true
}
//
const fullscreen = () => {
const element = document.documentElement
if (screenFull.isEnabled) {
screenFull.toggle(element)
} }
} }
</script> </script>

View File

@ -77,7 +77,9 @@
const global_store = globalStore() const global_store = globalStore()
const userInfo = ref(tool.data.get('USER_INFO')) const userInfo = computed(() => {
return global_store.userInfo
})
const cropUpload = ref() const cropUpload = ref()
const avatarLoading = ref(false) const avatarLoading = ref(false)
const uploadLogo = () => { const uploadLogo = () => {

View File

@ -39,15 +39,14 @@
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import userCenterApi from '@/api/sys/userCenterApi' import userCenterApi from '@/api/sys/userCenterApi'
import tool from '@/utils/tool' import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import { globalStore } from '@/store' import { globalStore } from '@/store'
const store = globalStore() const store = globalStore()
const formRef = ref() const formRef = ref()
//
const userInfo = tool.data.get('USER_INFO')
let formData = ref({}) let formData = ref({})
formData.value = userInfo formData.value = cloneDeep(store.userInfo)
const submitLoading = ref(false) const submitLoading = ref(false)
// //
const formRules = { const formRules = {
@ -64,7 +63,7 @@
userCenterApi.userUpdateUserInfo(formData.value).then(() => { userCenterApi.userUpdateUserInfo(formData.value).then(() => {
submitLoading.value = false submitLoading.value = false
// //
store.setUserInfo(formData.value) store.setUserInfo(cloneDeep(formData.value))
tool.data.set('USER_INFO', formData.value) tool.data.set('USER_INFO', formData.value)
}) })
}) })