github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 19:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
kuaifan 2025-03-04 14:25:24 +08:00
parent b65fdeacc2
commit 43b3d1d379
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/assets/js/components/SearchBox.vue
View File

@ -34,10 +34,10 @@
<i v-if="tag.type === action" class="taskfont tag-close">&#xe747;</i> <i v-if="tag.type === action" class="taskfont tag-close">&#xe747;</i>
</div> </div>
</div> </div>
<template v-if="listLength === 0"> <template v-if="total === 0">
<div v-if="loadIng > 0 || !searchKey.trim()" class="search-empty"> <div v-if="(loadIng + loadPre) > 0 || !searchKey.trim()" class="search-empty">
<i class="taskfont">&#xe60b;</i> <i class="taskfont">&#xe60b;</i>
<span>{{ $L(loadIng > 0 ? '正在拼命搜索...' : '请输入关键字搜索') }}</span> <span>{{ $L((loadIng + loadPre) > 0 ? '正在拼命搜索...' : '请输入关键字搜索') }}</span>
</div> </div>
<div v-else class="search-empty"> <div v-else class="search-empty">
<i class="taskfont">&#xe60b;</i> <i class="taskfont">&#xe60b;</i>
@ -96,7 +96,9 @@ export default {
data() { data() {
return { return {
loadPre: 0,
loadIng: 0, loadIng: 0,
searchKey: '', searchKey: '',
searchResults: [], searchResults: [],
searchTimer: null, searchTimer: null,
@ -156,7 +158,7 @@ export default {
return groups return groups
}, },
listLength({searchKey, searchResults, action}) { total({searchKey, searchResults, action}) {
const items = searchResults.filter(item => item.key === searchKey && (!action || item.type === action)) const items = searchResults.filter(item => item.key === searchKey && (!action || item.type === action))
return items.length return items.length
}, },
@ -275,15 +277,15 @@ export default {
if (this.searchTimer) { if (this.searchTimer) {
clearTimeout(this.searchTimer) clearTimeout(this.searchTimer)
this.searchTimer = null; this.searchTimer = null;
this.loadIng--; this.loadPre--;
} }
this.loadIng++; this.loadPre++;
this.searchTimer = setTimeout(() => { this.searchTimer = setTimeout(() => {
if (this.searchKey.trim()) { if (this.searchKey.trim()) {
this.onSearch() this.onSearch()
} }
this.searchTimer = null; this.searchTimer = null;
this.loadIng--; this.loadPre--;
}, 500) }, 500)
}, },

27
resources/assets/sass/components/search-box.scss vendored
View File

@ -105,34 +105,41 @@
.search-tags { .search-tags {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
gap: 12px; gap: 16px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 16px 20px 0; padding: 14px 20px 0;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@media (max-width: 768px) {
gap: 12px;
}
@media (max-width: 576px) {
gap: 8px;
}
.tag-item { .tag-item {
flex-shrink: 0; flex-shrink: 0;
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
border-radius: 8px; border-radius: 18px;
padding: 4px 12px; padding: 4px 12px;
line-height: 24px; line-height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
.tag-close { .tag-close {
font-size: 13px; margin-left: -1px;
margin-left: -3px; margin-right: -3px;
margin-right: -5px;
} }
&.action { &.action {
@ -149,7 +156,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
padding: 16px 24px 48px; padding: 14px 24px 48px;
> i { > i {
font-size: 44px; font-size: 44px;
@ -173,11 +180,11 @@
.search-list { .search-list {
overflow: auto; overflow: auto;
max-height: calc(100vh - 306px); max-height: calc(100vh - 305px);
overscroll-behavior: contain; overscroll-behavior: contain;
@media (max-height: 900px) { @media (max-height: 900px) {
max-height: calc(100vh - 176px); max-height: calc(100vh - 175px);
} }
> ul { > ul {