mirror of
https://github.com/jiangrui1994/CloudSaver.git
synced 2026-01-11 15:48:47 +08:00
fix:优化搜索逻辑
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user