feat: 更新无限加载组件，支持分页加载和错误处理

src/components/UseIntersectionObserverInfiniteLoading.vue

@@ -18,7 +18,7 @@ function checkIsVisible(el: Element, root: Element | null = null) {
 
 <script setup lang="ts">
 const props = defineProps<{
-  asyncLoad: () => Promise<{ hasMore: boolean }>;
+  asyncLoad: (page: number) => Promise<{ hasMore: boolean }>;
 }>();
 defineSlots<{
   loading(): unknown;
@@ -27,7 +27,8 @@ defineSlots<{
 }>();
 
 const target = ref(null);
-const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>(''); // TODO: use ts-enum-util
+let currentPage = 0;
+const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>('');
 
 const load = async (why?: string) => {
   console.group('load');
@@ -37,7 +38,7 @@ const load = async (why?: string) => {
 
   state.value = 'loading';
   try {
-    const { hasMore } = await props.asyncLoad();
+    const { hasMore } = await props.asyncLoad(++currentPage);
     state.value = hasMore ? 'loaded' : 'complete';
     if (hasMore) {
       await nextTick();
@@ -47,9 +48,10 @@ const load = async (why?: string) => {
     }
 
     if (!hasMore) {
-      pause(); // TODO: 下拉刷新后，怎么恢复？ maybe @register
+      pause(); // TODO: 下拉刷新后，怎么恢复？
     }
   } catch (error) {
+    currentPage--;
     state.value = 'error';
   }
 };
@@ -73,6 +75,7 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
 
 <template>
   <div class="infinite-loading" ref="target">
+    <!-- TODO: unSupport -->
     <div v-if="state === 'complete'" class="infinite-loading__complete">
       <slot name="complete">
         <span>没有更多了</span>