From 2574e38d9a96c40baf18ba72570098bccdfa3ff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?=
 <37316281+yanhao98@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:11:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=97=A0=E9=99=90?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6=E5=92=8C=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...UseIntersectionObserverInfiniteLoading.vue | 86 +++++++++++++++++++
 src/pages/InfiniteLoading.page.vue            | 32 +++++++
 .../useIntersectionObserverList.page.vue      | 82 ++++++++++++++----
 typed-router.d.ts                             |  1 +
 4 files changed, 184 insertions(+), 17 deletions(-)
 create mode 100644 src/components/UseIntersectionObserverInfiniteLoading.vue
 create mode 100644 src/pages/InfiniteLoading.page.vue

diff --git a/src/components/UseIntersectionObserverInfiniteLoading.vue b/src/components/UseIntersectionObserverInfiniteLoading.vue
new file mode 100644
index 0000000..f0cadf5
--- /dev/null
+++ b/src/components/UseIntersectionObserverInfiniteLoading.vue
@@ -0,0 +1,86 @@
+<script lang="ts">
+function checkIsVisible(el: Element, root: Element | null = null) {
+  if (!el) return false;
+
+  const elRect = el.getBoundingClientRect();
+  const rootRect = root
+    ? root.getBoundingClientRect()
+    : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth };
+
+  return (
+    elRect.bottom >= rootRect.top &&
+    elRect.top <= rootRect.bottom &&
+    elRect.right >= rootRect.left &&
+    elRect.left <= rootRect.right
+  );
+}
+</script>
+
+<script setup lang="ts">
+const target = ref(null);
+// defineSlots
+const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>(''); // TODO: use ts-enum-util
+
+const props = defineProps<{
+  asyncLoad: () => Promise<{ hasMore: boolean }>;
+}>();
+
+const load = async () => {
+  if (state.value === 'loading') return;
+
+  state.value = 'loading';
+  try {
+    const { hasMore } = await props.asyncLoad();
+    state.value = hasMore ? 'loaded' : 'complete';
+    if (hasMore) {
+      await nextTick();
+      if (checkIsVisible(target.value!)) {
+        load();
+      }
+    }
+
+    if (!hasMore) {
+      pause(); // TODO: 下拉刷新后，怎么恢复？ maybe @register
+    }
+  } catch (error) {
+    state.value = 'error';
+  }
+};
+
+const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
+  target,
+  ([entry]) => {
+    if (entry?.isIntersecting) {
+      load();
+    }
+  },
+  {
+    // 数值形式（单个值）：表示目标元素可见部分与整个目标元素的比例。例如：threshold: 0.5
+    //                 目标元素可见比例达到 50% 时触发回调。
+    // 数组形式（多个值）：表示多个可见比例触发点。例如：threshold: [0, 0.25, 0.5, 0.75, 1.0]。
+    //                 在目标元素可见部分从 0% 增加到 100% 时，每达到一个阈值都会触发回调。
+    threshold: 0,
+  },
+);
+</script>
+
+<template>
+  <div class="infinite-loading" ref="target">
+    <slot v-if="state === 'complete'" name="complete">
+      <span>没有更多了</span>
+    </slot>
+    <template v-else>
+      <div v-show="state == 'loading'">
+        <slot name="loading">
+          <span> 加载中... </span>
+        </slot>
+      </div>
+      <slot v-if="state === 'error'" name="error">
+        <div>
+          <span> 加载失败 </span>
+          <button @click="load">重试</button>
+        </div>
+      </slot>
+    </template>
+  </div>
+</template>
diff --git a/src/pages/InfiniteLoading.page.vue b/src/pages/InfiniteLoading.page.vue
new file mode 100644
index 0000000..01a2d27
--- /dev/null
+++ b/src/pages/InfiniteLoading.page.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+let showDebugError = true;
+const DEBUG_MAX_PAGE = 5;
+
+let page = 0;
+const list = ref<Record<string, never>[]>([]);
+const loadData = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1250));
+  if (page === 1 && showDebugError) {
+    showDebugError = false;
+    throw new Error('Failed to load comments');
+  }
+  // FIXME: 如果接口出错了要把 page 恢复
+  const response = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${++page}&_limit=1`);
+  const data = await response.json();
+  list.value.push(...data);
+  return { hasMore: page < DEBUG_MAX_PAGE };
+};
+</script>
+
+<template>
+  <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>
+  </Card>
+  <UseIntersectionObserverInfiniteLoading :async-load="loadData" />
+</template>
+
+<style scoped></style>
diff --git a/src/pages/useIntersectionObserverList.page.vue b/src/pages/useIntersectionObserverList.page.vue
index e41607e..f6fdb0b 100644
--- a/src/pages/useIntersectionObserverList.page.vue
+++ b/src/pages/useIntersectionObserverList.page.vue
@@ -2,39 +2,87 @@
 import { useIntersectionObserver } from '@vueuse/core';
 import { ref } from 'vue';
 
+function checkIsVisible(el: Element, root: Element | null = null) {
+  if (!el) return false;
+
+  const elRect = el.getBoundingClientRect();
+  const rootRect = root
+    ? root.getBoundingClientRect()
+    : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth };
+
+  return (
+    elRect.bottom >= rootRect.top &&
+    elRect.top <= rootRect.bottom &&
+    elRect.right >= rootRect.left &&
+    elRect.left <= rootRect.right
+  );
+}
+
+interface Comment {
+  postId: number;
+  id: number;
+  name: string;
+  email: string;
+  body: string;
+}
+const list = ref<Comment[]>([]);
+
 const loading = ref(false);
-const list = ref<string[]>([]);
+const page = ref(0);
+const pageSize = 1;
+
 const loadMore = async () => {
+  if (loading.value) return;
+
   loading.value = true;
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  const items = Array.from({ length: 5 }, (_, i) => `Item ${list.value.length + i + 1}`);
-  list.value.push(...items);
-  loading.value = false;
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const response = await fetch(
+      `https://jsonplaceholder.typicode.com/comments?_page=${++page.value}&_limit=${pageSize}`,
+    );
+    const data = await response.json();
+    list.value.push(...data);
+  } catch (error) {
+    console.error('Failed to load comments:', error);
+  } finally {
+    loading.value = false;
+  }
+  await nextTick();
+  if (checkIsVisible(target.value!)) {
+    loadMore();
+  }
 };
 
 const target = ref(null);
 const isVisible = ref(false);
 
-const { isActive, pause, resume, isSupported } = useIntersectionObserver([target], ([entry]) => {
-  isVisible.value = entry?.isIntersecting || false;
-});
+const { isActive, pause, resume, isSupported } = useIntersectionObserver(
+  target,
+  ([entry]) => {
+    isVisible.value = entry?.isIntersecting || false;
+    if (entry?.isIntersecting) {
+      loadMore();
+    }
+  },
+  // { threshold: 0.1 },
+);
 </script>
 
 <template>
-  <Card v-for="item in list" :key="item" class="mb-[16px]">
-    <template #title>{{ item }}</template>
+  <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>
   </Card>
 
-  <div ref="target" class="border-[8px] border-blue-500 p-[16px] bg-white dark:bg-gray-800 dark:border-gray-700">
+  <div ref="target" class="border-[8px] border-blue-500 p-[16px]">
     <Button label="Load more" :loading="loading" fluid @click="loadMore" />
   </div>
 
   <ScrollTop />
-  <div
-    class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white dark:bg-gray-800 dark:border-gray-700"
-    flex="~ col"
-    items-end
-  >
+  <div class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white" flex="~ col" items-end>
     <label class="checkbox">
       <span mr="[8px]">isSupported: {{ isSupported }}</span>
       <input
@@ -47,7 +95,7 @@ const { isActive, pause, resume, isSupported } = useIntersectionObserver([target
     </label>
     <div>
       Element
-      <span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400 dark:text-orange-300'">
+      <span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400'">
         {{ isVisible ? 'inside' : 'outside' }}
       </span>
       the viewport
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 1cd9b8e..cbe21e7 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -25,6 +25,7 @@ declare module 'vue-router/auto-routes' {
     'Api': RouteRecordInfo<'Api', '/api', Record<never, never>, Record<never, never>>,
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'IndexPage': RouteRecordInfo<'IndexPage', '/index-page', Record<never, never>, Record<never, never>>,
+    'InfiniteLoading': RouteRecordInfo<'InfiniteLoading', '/InfiniteLoading', Record<never, never>, Record<never, never>>,
     'MdPage': RouteRecordInfo<'MdPage', '/md-page', Record<never, never>, Record<never, never>>,
     'SomePage': RouteRecordInfo<'SomePage', '/some-page', Record<never, never>, Record<never, never>>,
     'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,