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

package.json

@@ -30,19 +30,19 @@
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.11",
-    "@intlify/unplugin-vue-i18n": "^6.0.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.1",
     "@primevue/themes": "^4.2.4",
     "@unhead/vue": "^1.11.13",
     "@vant/use": "^1.6.0",
     "@vueuse/core": "^12.0.0",
     "alova": "^3.2.6",
-    "axios": "^1.7.8",
+    "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "jsencrypt": "^3.3.2",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "page-stack-vue3": "^2.5.6",
-    "pinia": "^2.2.8",
+    "pinia": "^2.3.0",
     "pinia-plugin-persistedstate": "^4.1.3",
     "primeicons": "^7.0.0",
     "primelocale": "^1.2.2",
@@ -54,17 +54,17 @@
     "ts-enum-util": "^4.1.0",
     "utils4u": "^2.12.2",
     "vant": "^4.9.9",
-    "vite-plugin-webfont-dl": "^3.10.2",
+    "vite-plugin-webfont-dl": "^3.10.3",
     "vue": "^3.5.13",
     "vue-i18n": "10.0.5",
     "vue-page-stack": "^3.2.0",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.3",
+    "@eslint/compat": "^1.2.4",
     "@faker-js/faker": "^9.3.0",
     "@iconify-json/carbon": "^1.2.4",
-    "@iconify/utils": "^2.1.33",
+    "@iconify/utils": "^2.2.0",
     "@playwright/test": "^1.49.0",
     "@primevue/auto-import-resolver": "^4.2.4",
     "@tsconfig/node20": "^20.1.4",
@@ -91,20 +91,20 @@
     "lint-staged": "^15.2.10",
     "mockjs": "^1.1.0",
     "npm-run-all2": "^7.0.1",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "surge": "^0.24.6",
     "typescript": "~5.6.3",
-    "unocss": "^0.65.0",
+    "unocss": "^0.65.1",
     "unplugin-auto-import": "^0.18.6",
     "unplugin-icons": "^0.21.0",
     "unplugin-vue-components": "^0.27.5",
-    "unplugin-vue-macros": "^2.13.4",
+    "unplugin-vue-macros": "^2.13.5",
     "unplugin-vue-markdown": "^0.27.1",
-    "unplugin-vue-router": "^0.10.8",
-    "vercel": "^39.1.2",
-    "vite": "^6.0.2",
+    "unplugin-vue-router": "^0.10.9",
+    "vercel": "^39.1.3",
+    "vite": "^6.0.3",
     "vite-plugin-cdn-import": "^1.0.1",
-    "vite-plugin-fake-server": "^2.1.3",
+    "vite-plugin-fake-server": "^2.1.4",
     "vite-plugin-vue-devtools": "^7.6.7",
     "vue-tsc": "^2.1.10"
   }

src/components/UseIntersectionObserverInfiniteLoading.vue

@@ -21,10 +21,22 @@ const props = defineProps<{
   asyncLoad: (page: number) => Promise<{ hasMore: boolean }>;
 }>();
 defineSlots<{
+  // 加载中
   loading(): unknown;
+  // 加载完成（还有更多）
+  loadMore(props: { load: () => void }): unknown;
+  // 加载完成（没有更多了）
   complete(): unknown;
+  // 加载失败
   error(props: { retry: () => void }): unknown;
 }>();
+defineExpose({
+  refresh: () => {
+    currentPage = 0;
+    state.value = '';
+    load('refresh');
+  },
+});
 
 const target = ref(null);
 let currentPage = 0;
@@ -48,7 +60,7 @@ const load = async (why?: string) => {
     }
 
     if (!hasMore) {
-      pause(); // TODO: 下拉刷新后，怎么恢复？
+      pause();
     }
   } catch (error) {
     currentPage--;
@@ -56,7 +68,7 @@ const load = async (why?: string) => {
   }
 };
 
-const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
+const { pause, resume /*  ,isSupported, isActive */ } = useIntersectionObserver(
   target,
   ([entry]) => {
     if (entry?.isIntersecting) {
@@ -64,6 +76,9 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
     }
   },
   {
+    immediate: false,
+    root: undefined,
+    rootMargin: '0px',
     // 数值形式（单个值）：表示目标元素可见部分与整个目标元素的比例。例如：threshold: 0.5
     //                 目标元素可见比例达到 50% 时触发回调。
     // 数组形式（多个值）：表示多个可见比例触发点。例如：threshold: [0, 0.25, 0.5, 0.75, 1.0]。
@@ -71,11 +86,13 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
     threshold: 0,
   },
 );
+onMounted(() => {
+  resume();
+});
 </script>
 
 <template>
   <div class="infinite-loading" ref="target">
-    <!-- TODO: unSupport -->
     <div v-if="state === 'complete'" class="infinite-loading__complete">
       <slot name="complete">
         <span>没有更多了</span>
@@ -87,6 +104,20 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
           <span> 加载中... </span>
         </slot>
       </div>
+      <!-- 如果 isSupported，loaded 状态应该永远不会出现 -->
+      <div
+        v-show="state === 'loaded' || state === ''"
+        class="infinite-loading__loaded"
+        @click="
+          () => {
+            !$slots.loadMore && load('click loadMore');
+          }
+        "
+      >
+        <slot name="loadMore" :load>
+          <span> 加载更多 </span>
+        </slot>
+      </div>
       <div
         v-if="state === 'error'"
         class="infinite-loading__error"
@@ -104,8 +135,9 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
   </div>
 </template>
 
-<style scoped>
+<style>
 .infinite-loading__loading,
+.infinite-loading__loaded,
 .infinite-loading__complete,
 .infinite-loading__error {
   display: flex;
@@ -114,6 +146,7 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
   min-height: 40px;
   color: #666;
 }
+.infinite-loading__loaded,
 .infinite-loading__error {
   cursor: pointer;
 }

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> -->