Skip to content

Commit

Permalink
perf: 优化搜索提示
Browse files Browse the repository at this point in the history
  • Loading branch information
@kuaifan
kuaifan committed Jan 14, 2024
1 parent 5e52996 commit 9a69d20
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 53 deletions.
2 changes: 1 addition & 1 deletion resources/assets/js/pages/manage/components/DialogWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<Tag v-if="dialogData.type === 'user' && approvaUserStatus" class="after" color="red" :fade="false">{{$L(approvaUserStatus)}}</Tag>
<Tag v-if="dialogData.group_type=='all'" class="after pointer" :fade="false" @on-click="onDialogMenu('groupInfo')">{{$L('全员')}}</Tag>
<Tag v-else-if="dialogData.group_type=='department'" class="after pointer" :fade="false" @on-click="onDialogMenu('groupInfo')">{{$L('部门')}}</Tag>
<div v-if="msgLoadIng > 0" class="load"><Loading/></div>
<div v-if="msgLoadIng > 0 && allMsgs.length > 0" class="load"><Loading/></div>
</div>
<ul class="title-desc">
<li v-if="dialogData.type === 'user'" :class="[dialogData.online_state === true ? 'online' : 'offline']">
Expand Down
2 changes: 1 addition & 1 deletion resources/assets/js/pages/manage/components/ProjectList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<template v-if="projectLists.length === 0">
<li v-if="projectKeyLoading > 0" class="loading"><Loading/></li>
<li v-else class="nothing">
{{$L(projectKeyValue ? `没有任何与"${projectKeyValue}"相关的项目` : `没有任何项目`)}}
{{$L(projectKeyValue ? `没有任何与"${projectKeyValue}"相关的结果` : `没有任何项目`)}}
</li>
</template>
<li
Expand Down
53 changes: 30 additions & 23 deletions resources/assets/js/pages/manage/messenger.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,26 @@
v-if="tabActive==='dialog'"
v-model="dialogSearchKey"
ref="searchInput"
:placeholder="$L(loadDialogs > 0 ? '更新中...' : '搜索消息')"
:placeholder="$L(loadDialogs > 0 ? '更新中...' : '搜索')"
@on-keydown="onKeydown"
clearable>
<div class="search-pre" slot="prefix">
<Loading v-if="loadDialogs > 0 || dialogSearchLoad > 0"/>
<Loading v-if="dialogLoading"/>
<Icon v-else type="ios-search" />
</div>
</Input>
<Input
v-else
v-model="contactsKey"
ref="contactInput"
:placeholder="$L('搜索')"
@on-keydown="onKeydown"
clearable>
<div class="search-pre" slot="prefix">
<Loading v-if="contactsLoad"/>
<Icon v-else type="ios-search" />
</div>
</Input>
<Input v-else prefix="ios-search" v-model="contactsKey" :placeholder="$L('搜索联系人')" clearable />
</div>
</div>
<div v-if="tabActive==='dialog' && !dialogSearchKey" class="messenger-nav">
Expand Down Expand Up @@ -116,21 +127,12 @@
<div class="dialog-line"></div>
</li>
</template>
<li v-else-if="dialogSearchLoad === 0 && dialogMarkLoad === 0" class="nothing">
{{$L(dialogSearchKey ? `没有任何与"${dialogSearchKey}"相关的会话` : `没有任何会话`)}}
</li>
<li v-else class="nothing">
<Loading/>
<li v-else-if="dialogSearchLoad === 0" class="nothing">
{{$L(dialogSearchKey ? `没有任何与"${dialogSearchKey}"相关的结果` : `没有任何会话`)}}
</li>
</ul>
<ul v-else class="contacts">
<template v-if="contactsFilter.length === 0">
<li v-if="contactsLoad > 0" class="loading"><Loading/></li>
<li v-else class="nothing">
{{$L(contactsKey ? `没有任何与"${contactsKey}"相关的联系人` : `没有任何联系人`)}}
</li>
</template>
<template v-else>
<template v-if="contactsFilter.length > 0">
<li v-for="items in contactsList">
<div class="label">{{items.az}}</div>
<ul>
Expand All @@ -151,6 +153,9 @@
<template v-else>{{$L('共' + contactsTotal + '位联系人')}}</template>
</li>
</template>
<li v-else-if="contactsLoad == 0" class="nothing">
{{$L(contactsKey ? `没有任何与"${contactsKey}"相关的结果` : `没有任何联系人`)}}
</li>
</ul>
<div class="operate-position" :style="operateStyles" v-show="operateVisible">
<Dropdown
Expand Down Expand Up @@ -259,8 +264,6 @@ export default {
operateVisible: false,
clickAgainSubscribe: null,
dialogMarkLoad: 0,
}
},
Expand Down Expand Up @@ -485,6 +488,10 @@ export default {
});
return num;
}
},
dialogLoading({loadDialogs, dialogSearchLoad}) {
return loadDialogs > 0 || dialogSearchLoad > 0
}
},
Expand Down Expand Up @@ -535,8 +542,8 @@ export default {
if (val == '') {
return
}
this.__searchTimer && clearTimeout(this.__searchTimer)
this.__searchTimer = setTimeout(this.searchDialog, 600)
this.__search_timer && clearTimeout(this.__search_timer)
this.__search_timer = setTimeout(this.searchDialog, 600)
this.dialogSearchLoad++
setTimeout(_ => this.dialogSearchLoad--, 600)
},
Expand Down Expand Up @@ -614,7 +621,8 @@ export default {
onKeydown(e) {
if (e.key === "Escape") {
this.$refs.searchInput.handleClear()
this.$refs.searchInput?.handleClear()
this.$refs.contactInput?.handleClear()
}
},
Expand Down Expand Up @@ -811,8 +819,7 @@ export default {
},
searchTagDialog() {
//
this.dialogMarkLoad++;
this.dialogSearchLoad++;
this.$store.dispatch("call", {
url: 'dialog/search/tag',
}).then(({data}) => {
Expand All @@ -829,7 +836,7 @@ export default {
})
this.dialogSearchList = lists;
}).finally(_ => {
this.dialogMarkLoad--;
this.dialogSearchLoad--;
});
},
Expand Down
38 changes: 10 additions & 28 deletions resources/assets/sass/pages/page-messenger.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,16 @@
width: 100%;
overflow-x: hidden;
ul {
> li {
&.nothing {
margin: 0 !important;
padding: 24px !important;
text-align: center;
height: 100%;
border-radius: 0;
line-height: 22px;
}
}
&.dialog {
> li {
display: flex;
Expand Down Expand Up @@ -364,15 +374,6 @@
}
}
}
&.nothing {
justify-content: center;
padding: 24px;
margin: 0;
border: 0;
line-height: 22px;
cursor: default;
word-break: break-all;
}
}
}
&.contacts {
Expand All @@ -398,25 +399,6 @@
transform: scaleY(0.5);
}
}
&.nothing,
&.loading {
text-align: center;
height: 100%;
margin: 0;
padding: 24px;
border-radius: 0;
line-height: 22px;
}
&.loading {
display: flex;
align-items: flex-start;
justify-content: center;
.common-loading {
width: 20px;
height: 20px;
margin: 1px;
}
}
&.loaded {
margin: 0;
height: 52px;
Expand Down

0 comments on commit 9a69d20

Please sign in to comment.