增加搜索页面自动加载更多 (之前只能加载一页)

~~其实就是太激动了没做完就提交了~~

src/stores/search.js

@@ -7,25 +7,31 @@ export const useSimpleSearchState = defineStore('simpleSearch', () => {
 	const api = useApiStore()
 	const keyword = ref('')
 	const result = ref([])
-	const count = ref([])
+	const count = ref(0)
 	const pageCount = ref(0)
 	const currentPage = ref(0)
 	const state = ref(null)
 	async function load() {
-		if (currentPage.value == pageCount.value) state.value = 'finish'
+		if (pageCount.value && currentPage.value >= pageCount.value){ state.value = 'finish'; return }
 		let res = await api.workSimpleSearch(keyword.value, currentPage.value)
 		res = res.data
+		if( pageCount.value ) {
+			currentPage.value++
+			if (currentPage.value > pageCount.value) currentPage.value = pageCount.value
+		}
 		if (res.code == 0) {
-			currentPage.value = res.page
-			pageCount.value = res.pageCount
+			if ( !pageCount.value )  {
+				pageCount.value = res.pageCount
+				currentPage.value = res.page
+			}
 			count.value = res.count
 			state.value = import.meta.env.SSR ? 'ssrready' : 'ready'
 			result.value.push(...res.works)
 		} else if (res.code == 1) {
-			if (currentPage.value) {
+			if ( count.value ) {
 				state.value = 'finish'
 			} else {
-				currentPage.value = 1
+				currentPage.value = 0
 				state.value = 'notfound'
 			}
 		}
@@ -35,7 +41,8 @@ export const useSimpleSearchState = defineStore('simpleSearch', () => {
 		keyword.value = key
 		result.value = []
 		state.value = 'loading'
-		currentPage.value = 0
+		currentPage.value = 1
+		pageCount.value = 0
 		await load()
 	} 
 	

src/views/SimpleSearch.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onServerPrefetch } from 'vue'
+import { ref, watch, onMounted, nextTick, onServerPrefetch, onBeforeUnmount	 } from 'vue'
 import { useRoute } from 'vue-router'
 
 import 'mdui/components/text-field.js'
@@ -10,20 +10,43 @@ import { useSimpleSearchState } from '../stores/search.js'
 
 const route = useRoute()
 
-const inputField = ref('')
-
 const simpleSearchState = useSimpleSearchState()
 
+const inputField = ref('')
+const label = ref(null)
+const stateLabel = {
+	'loading': '加载中',
+	'finish': '加载完成',
+	'ready': '就绪',
+	'ssrready': '就绪',
+	'notfound': '未找到',
+	'ssrnotfound': '未找到',
+}
+
+let isObserver = null
+
 onServerPrefetch(async () => {
 	if (route.query.keyword) {
 		await simpleSearchState.start(route.query.keyword)
 	}
-	console.log(simpleSearchState.result[0])
 })
 
-onMounted(() => {
+onMounted(async () => {
 	inputField.value = route.query.keyword || ''
 	if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value)
+	isObserver = new IntersectionObserver((entries) => {
+		entries.forEach((entry) => {
+			if (entry.isIntersecting) {
+				simpleSearchState.load()
+			}
+		})
+	}, { threshold: 1 })
+	await nextTick()
+	isObserver.observe(label.value)
+})
+
+onBeforeUnmount(() => {
+	isObserver.disconnect();
 })
 
 function onSubmit(data) {
@@ -45,7 +68,9 @@ function onSubmit(data) {
 		<input type="text" id="src" name="src" />
 		<input type="submit" />
 	</template></ClientOnly></Form><Hr />
-	<p>State: {{ simpleSearchState.state }}</p><Hr/>
+	<template v-if="simpleSearchState.state == 'ready' || simpleSearchState.state == 'finish' || simpleSearchState.state == 'ssrready'">
+		<p>找到 {{ simpleSearchState.count }}</p><Hr/>
+	</template>
 	<template v-if="simpleSearchState.result" v-for="work in simpleSearchState.result" :key="work.workId">
 		<ClientOnly><mdui-card style="margin: 8px 0px;"><article>
 			<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
@@ -59,4 +84,9 @@ function onSubmit(data) {
 			<Hr />
 		</template></ClientOnly>
 	</template>
+	<p style="display: flex;" ref='label'>
+		{{ stateLabel[simpleSearchState.state] }} ({{ simpleSearchState.count }})
+	<span style="flex: 1;"/>
+		{{ simpleSearchState.currentPage }} / {{ simpleSearchState.pageCount }}
+	</p>
 </template>