Search pagination

web/src/utils/api/cloud.ts

@@ -67,7 +67,7 @@ export async function search(
   var data = {
     s: keywords.replace(/[\s]+/g, '+'),
     limit: limit,
-    offset: offset * 30,
+    offset: offset,
     type: type,
     strategy: 5,
     queryCorrect: true
@@ -626,11 +626,11 @@ export async function lyricFuzzyMatch(music: Music): Promise<string> {
   if (music.album && !keywords.includes(music.album)) {
     keywords += music.album + ' ';
   }
-  keywords = keywords.replace(/\-/g, '').replace(/[\s]+/, ' ');
+  keywords = keywords.replace(/\-/g, ' ').replace(/[\s]+/, ' ').trim();
   const res = await search(keywords);
   if (res.list.length === 0) return '';
   let lyricText = '';
-  const localLength = duration2Millisecond(music.duration);
+  const localLength = music.length || duration2Millisecond(music.duration);
   for (let i = 0; i < res.list.length; i++) {
     if (res.list[i].duration == music.duration) {
       lyricText = await lyric(res.list[i]);
@@ -641,6 +641,7 @@ export async function lyricFuzzyMatch(music: Music): Promise<string> {
     for (let i = 0; i < res.list.length; i++) {
       const remoteLength = duration2Millisecond(res.list[i].duration);
       if (
+        keywords.includes(res.list[i].name) &&
         remoteLength < localLength + 3000 &&
         remoteLength > localLength - 3000
       ) {

web/src/views/local.vue

@@ -14,6 +14,7 @@ import {
   webView2Services
 } from '../utils/utils';
 import { fileToMusic, fileHandlerDB, pathToMusic } from '../utils/api/local';
+import { useThrottleFn } from '@vueuse/core';
 
 const play = usePlayStore();
 const setting = useSettingStore();
@@ -22,6 +23,7 @@ const musicListAll = [] as Music[];
 const loading = ref(false);
 const selectLocalDirShow = ref(false);
 const searchKey = ref('');
+const startSearchThrottle = useThrottleFn(startSearch, 500);
 function startSearch() {
   musicList.value = searchKey.value
     ? musicListAll.filter(
@@ -231,7 +233,9 @@ onMounted(syncLocalMusic);
           class="music-local-header-search"
           v-model="searchKey"
           placeholder="搜索"
+          :readonly="loading"
           @keyup.enter.native="startSearch"
+          @input="startSearchThrottle"
           clearable>
           <template #prefix>
             <el-icon

web/src/views/search.vue

@@ -14,8 +14,8 @@ const total = ref(0);
 const musicList: Ref<Music[]> = ref([] as Music[]);
 const keywords = ref('');
 const loading = ref(false);
-const unWatch = watch(currentRoute, searchMusic);
-async function searchMusic() {
+const unWatch = watch(currentRoute, searchMusic.bind(null, true));
+async function searchMusic(clear: boolean = true) {
   if (currentRoute.value.meta.key != 'search') return;
   setting.currentMusicType = currentRoute.value.params.type as MusicType;
   setting.currentMusicTypeShow = true;
@@ -26,12 +26,18 @@ async function searchMusic() {
   if (await checkLink(kw)) {
     return;
   }
+  loading.value = true;
   keywords.value = kw;
   searchTextShow.value = true;
-  var result = await api.search(setting.currentMusicType, keywords.value, 0);
+  var result = await api.search(
+    setting.currentMusicType,
+    keywords.value,
+    musicList.value.length
+  );
   total.value = result.total;
-  musicList.value.splice(0, musicList.value.length);
+  clear && musicList.value.splice(0, musicList.value.length);
   result.list.map((m: Music) => musicList.value.push(m));
+  loading.value = false;
 }
 async function checkLink(link: string) {
   if (!/^(http|https):\/\//.test(link)) return false;
@@ -107,6 +113,10 @@ onUnmounted(unWatch);
     </div>
     <el-scrollbar>
       <MusicList :list="musicList" search :loading="loading" />
+      <div
+        v-if="total > musicList.length && !loading"
+        class="load-more"
+        @click="searchMusic(false)"></div>
     </el-scrollbar>
   </div>
 </template>