fix:优化搜索逻辑

This commit is contained in:
jiangrui
2025-03-07 23:21:24 +08:00
parent a04f16bfa4
commit eedd68d137
6 changed files with 62 additions and 17 deletions

View File

@@ -83,10 +83,16 @@ watch(
keyword.value = newKeyword; keyword.value = newKeyword;
handleSearch(); handleSearch();
} else { } else {
keyword.value = ""; keyword.value = resourcStore.keyword;
} }
} }
); );
watch(
() => resourcStore.keyword,
(newKeyword) => {
keyword.value = newKeyword;
}
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -100,12 +100,12 @@ export const useResourceStore = defineStore("resource", {
pan115: "danger", pan115: "danger",
quark: "success", quark: "success",
}, },
keyword: "",
resources: lastResource.list, resources: lastResource.list,
lastUpdateTime: lastResource.lastUpdateTime || "", lastUpdateTime: lastResource.lastUpdateTime || "",
shareInfo: {} as ShareInfoResponse, shareInfo: {} as ShareInfoResponse,
resourceSelect: [] as ShareInfo[], resourceSelect: [] as ShareInfo[],
loading: false, loading: false,
lastKeyWord: "",
backupPlan: false, backupPlan: false,
loadTree: false, loadTree: false,
}), }),
@@ -123,35 +123,43 @@ export const useResourceStore = defineStore("resource", {
if (isLoadMore) { if (isLoadMore) {
const list = this.resources.find((x) => x.id === channelId)?.list || []; const list = this.resources.find((x) => x.id === channelId)?.list || [];
lastMessageId = list[list.length - 1].messageId || ""; lastMessageId = list[list.length - 1].messageId || "";
if (list[list.length - 1].isLastMessage) {
ElMessage.warning("没有更多了~");
return;
}
if (!lastMessageId) { if (!lastMessageId) {
ElMessage.error("当次搜索源不支持加载更多"); ElMessage.error("当次搜索源不支持加载更多");
return; return;
} }
keyword = this.lastKeyWord; keyword = this.keyword;
} }
let { data = [] } = await resourceApi.search(keyword || "", channelId, lastMessageId); let { data = [] } = await resourceApi.search(keyword || "", channelId, lastMessageId);
this.keyword = keyword || "";
data = data.filter((item) => item.list.length > 0); data = data.filter((item) => item.list.length > 0);
this.lastKeyWord = keyword || "";
if (isLoadMore) { if (isLoadMore) {
const findedIndex = this.resources.findIndex((item) => item.id === data[0]?.id); const findedIndex = this.resources.findIndex((item) => item.id === data[0]?.id);
if (findedIndex !== -1) { if (findedIndex !== -1) {
this.resources[findedIndex].list.push(...data[0].list); this.resources[findedIndex].list.push(...data[0].list);
} }
if (data.length === 0) { if (data.length === 0) {
ElMessage.warning("没有更多了~"); const list = this.resources.find((item) => item.id === channelId)?.list;
list && list[list.length - 1] && (list[list.length - 1]!.isLastMessage = true);
} }
ElMessage.warning("没有更多了~");
} else { } else {
this.resources = data.map((item) => ({ ...item, displayList: true })); this.resources = data.map((item) => ({ ...item, displayList: true }));
if (this.resources.length === 0) { if (!keyword) {
ElMessage.warning("未搜索到相关资源");
}
}
// 获取当前时间字符串 用于存储到本地 // 获取当前时间字符串 用于存储到本地
this.lastUpdateTime = new Date().toLocaleString(); this.lastUpdateTime = new Date().toLocaleString();
localStorage.setItem( localStorage.setItem(
"last_resource_list", "last_resource_list",
JSON.stringify({ list: this.resources, lastUpdateTime: this.lastUpdateTime }) JSON.stringify({ list: this.resources, lastUpdateTime: this.lastUpdateTime })
); );
}
if (this.resources.length === 0) {
ElMessage.warning("未搜索到相关资源");
}
}
} catch (error) { } catch (error) {
this.handleError("搜索失败,请重试", null); this.handleError("搜索失败,请重试", null);
} finally { } finally {

View File

@@ -10,6 +10,7 @@ export interface ResourceItem {
pubDate: string; pubDate: string;
cloudType: string; cloudType: string;
messageId?: string; messageId?: string;
isLastMessage?: boolean;
} }
export interface Resource { export interface Resource {

View File

@@ -142,7 +142,7 @@ import ResourceSelect from "@/components/Home/ResourceSelect.vue";
import ResourceTable from "@/components/Home/ResourceTable.vue"; import ResourceTable from "@/components/Home/ResourceTable.vue";
import { formattedFileSize } from "@/utils/index"; import { formattedFileSize } from "@/utils/index";
import type { ResourceItem, TagColor } from "@/types"; import type { ResourceItem, TagColor } from "@/types";
import { onMounted, onBeforeUnmount } from "vue";
import ResourceCard from "@/components/Home/ResourceCard.vue"; import ResourceCard from "@/components/Home/ResourceCard.vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
@@ -212,8 +212,20 @@ const handleLoadMore = (channelId: string) => {
}; };
const searchMovieforTag = (tag: string) => { const searchMovieforTag = (tag: string) => {
router.push({ path: "/", query: { keyword: tag } }); router.push({ path: "/resource", query: { keyword: tag } });
}; };
// 页面进入 设置缓存的数据源
onMounted(() => {
const lastResourceList = localStorage.getItem("last_resource_list");
if (lastResourceList) {
resourceStore.resources = JSON.parse(lastResourceList).list;
}
});
// 页面销毁 清除搜索词
onBeforeUnmount(() => {
resourceStore.keyword = "";
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -81,10 +81,16 @@ watch(
searchForm.value.keyword = keyword; searchForm.value.keyword = keyword;
handleSearch(); handleSearch();
} else { } else {
searchForm.value.keyword = ""; searchForm.value.keyword = resourceStore.keyword;
} }
} }
); );
watch(
() => resourceStore.keyword,
(newKeyword) => {
searchForm.value.keyword = newKeyword;
}
);
// 方法定义 // 方法定义
const handleSearch = async () => { const handleSearch = async () => {

View File

@@ -121,7 +121,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, computed } from "vue"; import { ref, watch, onMounted, onUnmounted, computed, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { showToast } from "vant"; import { showToast } from "vant";
import { useResourceStore } from "@/stores/resource"; import { useResourceStore } from "@/stores/resource";
@@ -223,14 +223,14 @@ const searchMovieforTag = (tag: string) => {
// 使用节流包装加载更多函数 // 使用节流包装加载更多函数
const throttledLoadMore = throttle((channelId: string) => { const throttledLoadMore = throttle((channelId: string) => {
resourceStore.searchResources("", true, channelId); resourceStore.searchResources("", true, channelId);
}, 200); }, 2000);
// 滚动加载 // 滚动加载
const doScroll = () => { const doScroll = () => {
const appElement = document.querySelector("#app") as HTMLElement; const appElement = document.querySelector("#app") as HTMLElement;
if (appElement) { if (appElement) {
const { scrollHeight, scrollTop, clientHeight } = appElement; const { scrollHeight, scrollTop, clientHeight } = appElement;
if (scrollHeight - (clientHeight + scrollTop) <= 200) { if (scrollHeight - (clientHeight + scrollTop) <= 10) {
throttledLoadMore(currentTab.value); throttledLoadMore(currentTab.value);
} }
} }
@@ -258,6 +258,18 @@ watch(currentTab, () => {
appElement.scrollTo(0, 0); appElement.scrollTo(0, 0);
} }
}); });
// 页面进入 设置缓存的数据源
onMounted(() => {
const lastResourceList = localStorage.getItem("last_resource_list");
if (lastResourceList) {
resourceStore.resources = JSON.parse(lastResourceList).list;
}
});
// 页面销毁 清除搜索词
onBeforeUnmount(() => {
resourceStore.keyword = "";
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>