feat: 更新无限加载组件，添加刷新功能和错误处理，优化加载状态管理

src/pages/infinite-loading.page.vue

@@ -18,17 +18,19 @@ const loadData = async (page: number) => {
 </script>
 
 <template>
+  <Button label="刷新" @click="list.splice(0, list.length) && $refs.infiniteLoading?.refresh()" />
   <Card v-for="item in list" :key="item.id" class="mb-[16px]">
     <template #title>{{ item.name }}</template>
     <template #content>
-      <p class="text-gray-600">{{ item.email }}</p>
       <p class="mt-[8px]">{{ item.body }}</p>
     </template>
+    <template #subtitle>id:{{ item.id }} </template>
+    <template #footer>{{ item.email }}</template>
   </Card>
   <div border="1 px solid red">
     {{ { 'list.length': list.length } }}
   </div>
-  <UseIntersectionObserverInfiniteLoading :async-load="loadData">
+  <UseIntersectionObserverInfiniteLoading :async-load="loadData" ref="infiniteLoading">
     <!-- <template #error="{ retry }">
       <Button fluid @click="retry">Retry</Button>
     </template> -->