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

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

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>